<template>
	<view class="content" v-if="datas.length != 0">
		<view class="title">
			<view v-html="datas[0].question_title"></view>
		</view>
		<!-- 只有子题目,第一层才会显示[您的答案] -->
		<view class="myAnswer" v-if='datas[0].is_sub_question == 1'>您的答案:　
			<!-- 需要循环两重数组才可以拿到[您的答案] -->
			<block v-if='datas[0].interest_lists_log'>
				<block v-for='(item,index) in datas[0].interest_lists_log' :key='index'>
					<text v-for="(item2,index2) in item.user_text_answer" :key='index2'>{{item2 + ' '}}</text>
				</block>
			</block>
		</view>
		<!-- 正确答案填空题放在了数组中,因此需要判断来显示 -->
		<block v-if='datas[0].answer_list && datas[0].question_typeid >= 3'>
			<view class="rightAnswer">正确答案:　
				<text v-for='(item,index) in datas[0].answer_list' :key='index'>
					<text v-if='item.is_answer == 1' style="margin-left: 10upx;">{{item.answer}}</text>
				</text>
			</view>
		</block>
		<!-- 单选题/多选题则直接显示 -->
		<block v-else>
			<view class="rightAnswer">正确答案:　<text>{{datas[0].answer}}</text></view>
		</block>
		<view class="analysis">
			<text>题目解析</text>
			<view v-html="datas[0].question_analysis"></view>
		</view>
		<view class="analysis">
			<text>知识点</text>
			<view>章节/知识点：{{zj.gradeName}}{{zj.subject_name}}{{zj.f_section_name}}{{zj.section_name}}</view>
		</view>
		<view class="wenda" v-if="datas[0].question_typeid == 5">说明：（问答得分率低于75%为错题）</view>
		<view class="bottom">
			<view class="imageView" @click="dialogData()">
				<image src="../../static/image/top.png"></image>
			</view>
			<view class="footer" :current="current">
				<view class="footer_left">答错记录</view>
				<view class="footer_right"><text>{{ current + 1 }}</text>/{{length}}</view>
			</view>
			<swiper class="swiper" v-if="dislog" @change="swiperChange">
				<swiper-item class="error" v-for="(item,index) in recodeList" :key="index">
					<view class="error-title">
						<view>您的答案：</view>
						<view>{{item.time}}</view>
					</view>
					<block v-if='item.question_typeid >= 3'>
						<block v-if='item.user_text_answer'>
							<view v-for='(item2,index2) in item.user_text_answer' :key='index2'>
								{{item2}}
							</view>
						</block>
					</block>
					<block v-else>
						<view>{{item.myanswer}}</view>
					</block>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import util from '../../common/util.js';
	export default{
		data() {
			return {
				intelligent_id: '',
				datas: [],
				dislog:false,
				recodeList: [],
				length: 0,
				current: 0, //滑动页面的ID
				data:'',
				zid: '',
				zj: '',
				groupid: '',
				student_id: ''
			}
		},
		onLoad(e) {
			this.intelligent_id = e.intelligent_id;
			this.student_id = e.student_id;
			if(e.groupid != null) {
				this.groupid = e.groupid;
			}
			this.getlist();
		},
		// 收藏函数
		onNavigationBarButtonTap(e) {
			// #ifdef APP-PLUS
				var webView = this.$mp.page.$getAppWebview();
			// #endif
			if(e.index == 9999) {
				
				var data = {
					question_id: this.datas[0].question_id,
					source_type: this.datas[0].source_type
				}
				if(this.datas[0].is_favorite == 0) {
					this.datas[0].is_favorite = 1;
					this.$zapi.apiPost('user/Collection.users/CollectionAdd',data).then(res=>{
						if(res.data.code==200){
							uni.showToast({
								title: '添加收藏成功！',
								icon:'none',
								success:function(){
									// #ifdef APP-PLUS
									webView.setTitleNViewButtonStyle(0, {
									    text: '\ue6ac',  
									}); 
									// #endif
								}
							});
						}
					});
				} else {
					this.datas[0].is_favorite = 0;
					this.$zapi.apiPost('user/Collection.users/CollectionDetele',data).then(res=>{
						if(res.data.code==200){
							uni.showToast({
								title: '取消收藏成功！',
								icon:'none',
								success:function(){
									// #ifdef APP-PLUS
									
									webView.setTitleNViewButtonStyle(0, {
									    text: '\ue6ad',  
									}); 
									// #endif
								}
							});
						}
					});
				}
				this.$forceUpdate();
			} else {
				var _this = this;
				uni.showModal({
					content: '移除后将无法恢复，确定要移除错题吗？',
					confirmColor: '#FF9900',
					success:function(r){
						if (r.confirm) {
							_this.$zapi.apiPost('user/intelligent.users/IntelligentRemove',{intelligent_id:_this.intelligent_id}).then(res => {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
								uni.navigateBack({
									delta:1
								},2000)
							})
						}
					}
				})
			}
		},
		methods:{
			getlist:function(){
				var data = {
					page: 1,
					pagesize: 5,
					lists_type: 1,
					intelligent_id: this.intelligent_id,
					student_id: this.student_id
				};
				if(this.groupid != '') {
					data.lists_type = 2;
					data.groupid = this.groupid;
				}
				// 请求[智提本列表]
				this.$zapi.apiPost('user/intelligent.users/intelligentLists',data).then(res=>{
					if(res.data.code == 200){
						var data = res.data.data.data;
						var question_ids_string = res.data.data.question_ids_string;
						this.loaddata(data,question_ids_string);
						// #ifdef APP-PLUS
						var webView = this.$mp.page.$getAppWebview();
						if(data[0].is_favorite == 1){
							webView.setTitleNViewButtonStyle(0, {
							    text: '\ue6ac',  
							}); 
						}else{
							webView.setTitleNViewButtonStyle(0, {
							    text: '\ue6ad',  
							}); 
						}
						// #endif
					}else{
						this.datas = [];
					}
				});
			},
			// 获取[试题列表]
			loaddata: function(list,question_ids_string) {
				this.$zapi.apiPost('user/question.Lists/questionList',{
					question_id:question_ids_string,
					is_get_answer:2,
					is_out_html:2,
				}).then(res=>{
					if(res.data.code==200){
						var dataList = res.data.data.data;
						this.data=dataList;
						this.zid = res.data.data.data[0].zid;
						util.latex_reques(dataList,'question_title');//解析 试题标题 latex 公式转换
						util.latex_reques(dataList,'question_analysis');//解析 试题解析 latex 公式转换
						util.latex_answer(dataList,'answer_list');//解析答案选项 latex 公式转换
						for(let i = 0;i < dataList.length; i++){
							var arr=[]; 
							for(let j = 0;j < list.length; j++){
								if(dataList[i].question_id==list[j].question_id){
									var obj={};
									dataList[i].is_favorite=list[j].is_favorite;
									obj.user_text_answer=list[j].user_text_answer;
									obj.question_answer_id=list[j].question_answer_id;
									arr.push(obj);
								}
							}
							dataList[i].interest_lists_log = arr;
						}
						var da = util.getAnalysis(dataList);
						this.datas =  da;
						this.datas[0].source_type = list[0].source_type;
						var time = list[0].update_time;
						this.datas[0].update_time = util.getBriefTime(time);
						this.datas[0].errors_num = list[0].errors_num;
					}
					this.getRecode();
					this.getZid();
				});  
			},
			getRecode() {
				var data = {
					intelligent_id: this.intelligent_id,
					student_id: this.student_id
				}
				// 子内容
				this.$zapi.apiPost('user/intelligent.users/IntelligentListsDetail',data).then(res =>{
					if(res.data.code == 200) {
						this.recodeList = res.data.data.data;
						var lists = this.recodeList;
						this.length = this.recodeList.length;
						for(var i = 0; i < lists.length; i++) {
							lists[i].answer_list = this.data[0].answer_list;
							var arr=[];
							var obj={};
							obj.user_text_answer = lists[i].user_text_answer;
							obj.question_answer_id = lists[i].question_answer_id;
							arr.push(obj);
							lists[i].interest_lists_log=arr;
						}
						this.recodeList = util.getAnalysis(lists);
						for(var j = 0; j < this.recodeList.length; j++){
							this.recodeList[j].time = util.getBriefTime(this.recodeList[j].creat_time);
						}
					}
				})
			},
			getZid(){
				var data = {
					zid: this.zid,
					student_id: this.student_id
				}
				this.$zapi.apiPost('user/subject.Lists/sectionDetail',data).then(res => {
					if(res.data.code == 200) {
						var list = res.data.data[0];
						this.zj = list;
						this.zj.gradeName = util.getgradeName(list.grade);
					}
				})
			},
			dialogData() {
				this.dislog = !this.dislog;
			},
			swiperChange: function(e) {
				this.arr = []; //清空填空题的答案
				this.current = e.target.current;
				this.pro = this.save_pro * (this.current + 1); //更新进度条
			},
		}
	}
</script>

<style>
	page{
		background-color: #FAFAFA;
	}
	.content{
		background-color: #FFFFFF;
		width: 100%;
		margin-bottom: 200upx;
		/* padding-bottom: 30upx; */
	}
	.title{
		margin: 0 30upx 30upx;
		padding-top: 30upx;
		color: #333333;
		font-size: 36upx;
	}
	.myAnswer{
		color: #FFB800;
		font-size: 34upx;
		margin: 30upx 0 0 30upx;
	}
	.rightAnswer{
		display: flex;
		color: #00D5A2;
		font-size: 34upx;
		margin: 30upx 0 0 30upx;
	}
	.analysis{
		margin: 30upx;
		color: #666666;
		font-size: 34upx;
		padding-bottom: 30upx;
	}
	.analysis text{
		font-size: 36upx;
		border-left: 2px solid #00D5A2;
		padding-left: 16upx;
		font-weight: bold;
		margin-bottom: 20upx;
	}
	.analysis view{
		color: #666666;
		font-size: 34upx;
	}
	.wenda{
		color: #999999;
		font-size: 34upx;
		background-color: #FAFAFA;
		padding-left: 30upx;
		padding-top: 30upx;
	}
	/* 底部 */
	.bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.imageView{
		width: 120upx;
		height: 40upx;
		background-color: #FFB800;
		border-radius: 20px 20px 0px 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: calc(50% - 60upx);
	}
	.imageView image{
		width: 68upx;
		height: 16upx;
	}
	.footer{
		height: 90upx;
		width: 100%;
		background: #FFFFFF;
		box-shadow:0px 0px 0px rgba(229,229,229,1);
		display: flex;
		justify-content: space-between;
	}
	.footer_left{
		margin-left: 30upx;
		line-height: 90upx;
		color: #666666;
		font-size: 34upx;
	}
	.footer_right{
		color: #666666;
		font-size: 34upx;
		line-height: 90upx;
		margin-right: 30upx;
	}
	.footer_right text{
		font-size: 42upx;
	}
	.swiper {
		width: 100%;
		height: 920upx;
		background-color: #FAFAFA;
		overflow: auto !important;
	}
	.error{
		width: calc(100% - 60upx) !important;
		padding: 0 30upx;
		overflow: auto !important;
	}
	.error-title{
		padding-top: 30upx;
		display: flex;
		justify-content: space-between;
	}
	.error-title view{
		color: #00D5A2;
		font-size: 34upx;
	}
	.error-title view:last-child{
		color: #CCCCCC;
	}
</style>
